// 获取到页面的清除文本框内容的图片img标签
let clearIcon = document.querySelectorAll(".register-clear");
// 获取页面的输入框
let registerInput = document.querySelectorAll(".register-input");

registerInput.forEach( function( v , i){
    v.addEventListener( "input" , function(){
        if( v.value != "" ){
            clearIcon[i].style.display = "block";
        }else{
            clearIcon[i].style.display = "none";
        }
    })
})
// 清除输入框的内容
clearIcon.forEach( function( v , i){
    v.addEventListener( "click" , function(){
        registerInput[i].value = "";
        this.style.display = "none";
    })
})


// 处理输入框失去焦点之后，需要对输入框中的数据进行验证
// 需要获取到页面上的每个input
// 遍历到每个input框，给其添加失去焦点事件
registerInput.forEach( function( v , i ){
    // 需要给每个input添加失去焦点事件
    v.addEventListener( "blur" , function(){
   //获取对应的input和value值，进行判断
   if( this.name == "username" ){
       commonCheckForm( /^[0-9A-Za-z]{6,12}$/ , this , ".register-item p");
   }
   if( this.name == "tel" ){
       commonCheckForm( /^1[3-9]\d{9}$/ , this , ".register-item p");
   }
   if( this.name == "code" ){
       commonCheckForm( /^\d{4}$/ , this , ".register-item p" );
   }
   if( this.name == "pwd" ){
       commonCheckForm( /^[\d\w]{6,12}$/ , this , ".register-item p" );
   }
  })
});
function commonCheckForm( exp , dom , className ){
    if( ! ( exp.test( dom.value ) ) ){
        // 由于传递进来的选择器在页面中存在多个可以被选中的标签，
        dom.nextElementSibling.style.display = "block";
        return false;
    }else{
        dom.nextElementSibling.style.display = "none";
        return true;
    }
}

/**
 * 需求：在点击注册按钮的时候，需要再次判断表单的每项是否正确输入
 */
let btn = document.querySelector(".register-submit-btn");
btn.addEventListener( "click" , function(){
    // 需要有一个标记，用来记录表单验证的结果
    let flag = true;

    //判断表单所有输入框是否全部验证通过
    registerInput.forEach( function( v  , i ){
        if( v.name == "username" ){
            flag = commonCheckForm( /^[0-9A-Za-z]{6,12}$/ , v , ".register-item p" );
        }
        if( v.name == "tel" ){
            flag = commonCheckForm( /^1[3-9]\d{9}$/ , v , ".register-item p" );
        }
        if( v.name == "code" ){
            flag = commonCheckForm( /^\d{4}$/ , v , ".register-item p" );
        }
        if( v.name == "pwd" ){
            flag = commonCheckForm( /^[\d\w]{6,12}$/ , v , ".register-item p" );
        }
    })
    // 如果验证通过之后，回头删除表单中的数据，导致不通过
    console.log(flag);
    // 获取到页面项的复选框
    let checkbox = document.querySelector(".checkbox");
    
    if( flag && checkbox.checked ){
        // 将按钮的颜色（改成可用状态）
        btn.classList.add("active");
        btn.disabled = false;
    }else{
        // 将按钮的颜色（改成可用禁用）
        btn.classList.remove("active");
        btn.disabled = true;
    }


} )